<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>computed依赖的数据</title>
</head>

<body>
    <h2>computed依赖的数据</h2>
    <ul>
        <li>computed想要实现，依赖数据变化之后，结果立刻变化，前提条件依赖的数据必须是vue内部的数据。</li>
        <li>也可以依赖其它计算属性的结果</li>
        <li>也可以依赖其它方法的结果</li>
    </ul>
    <main id="app">
        <p>姓名：{{name}}</p>
        <p>年龄：{{age}}</p>
        <input type="text" v-model="age">
        <h2>方法</h2>
        <h2>计算属性</h2>
        <p>{{isAdult}}</p>
        <p>依赖其它计算属性：{{isAdultLength}}</p>
        <p>依赖其它方法：{{isAdultMethodLength}}</p>
    </main>
</body>
<script src="../vue.js"></script>
<script>

    let vue = new Vue({
        el: "#app",
        data: {
            name: "Hydra",
            age: 35,
            message: "Hello"
        },
        methods: {
            isAdultMethod() {
                return this.age >= 18 ? "成年" : "未成年";
            }
        },
        computed: {
            isAdult() {
                console.log("计算属性调用")
                return this.age >= 18 ? "成年" : "未成年";
            },
            isAdultLength() {
                // 访问计算属性，不要加()
                return this.isAdult.length;
            },
            isAdultMethodLength() {
                // 访问计算属性，不要加()
                return this.isAdultMethod().length;
            }
        }
    });
</script>

</html>